'use client';

import React from 'react';

interface GraphControlsProps {
    depth: number;
    setDepth: (depth: number) => void;
}

export default function GraphControls({ depth, setDepth }: GraphControlsProps) {
    return (
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-white/80 backdrop-blur-sm p-4 rounded-full shadow-lg border border-slate-200 flex items-center gap-4 z-10">
            <span className="text-ink-medium font-serif text-sm">传递层级</span>
            <input
                type="range"
                min="1"
                max="5"
                value={depth}
                onChange={(e) => setDepth(parseInt(e.target.value))}
                className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-ink-black"
            />
            <span className="text-ink-black font-serif font-bold w-4 text-center">{depth}</span>
        </div>
    );
}
